import { defineComponent, ref } from "vue";
import styles from "./Notify.module.scss";
import { IconFont } from '@nutui/icons-vue';
import { useStore as useInsureStore } from "@/store/insure";
import Notifys from "../Notifys/Notifys";
export default defineComponent({
  props: {
    form: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  setup(props) {
    const notifysRef = ref(null as any);
    const insureStore = useInsureStore();
    // 查看协议
    const seeNotify = () => {
      notifysRef.value.open();
    }
    return () => (
      <>
        <div class={styles['notify']}>
          <div class={styles['notify-content']}>
            我已认真阅读并确认<span onClick={() => { seeNotify() }}>{insureStore.state.term_pact.map((x: any) => x.name)}</span>
          </div>
          <div class={styles['checkbox-bar']} onClick={() => { seeNotify() }}>
            <div class={styles['checkbox']}>
              <IconFont name="checked" color="#5e61fe" v-show={props.form.agree} />
              <IconFont name="check-normal" v-show={!props.form.agree} />
            </div>
            <div class={styles['checkbox-content']}>
              我已认真阅读并确认
            </div>
          </div>
        </div>
        <Notifys ref={notifysRef} onConfirm={() => { props.form.agree = true; notifysRef.value.close() }} />
      </>
    )
  }
})